No se trata de nada nuevo ni por descubrir, todo lo contrario, es uno de los efectos más usados y comentados en este blog.
Se trata de añadir un bloque animado, para el que necesitaremos descargar el archivo .js y alojarlo en un servidor propio.
Después nos situamos en la plantilla edición de HTML y justo antes de </HEAD> añadimos el script de Dynamic Drive incluyendo en él la url del archivo.js
Una vez tenemos el script alojado en la plantilla añadimos el código para el bloque animado en Plantilla/añadir un elemento de página/HTML/JavaScript.
Ver explicaciones para la creación de un bloque animado.
Para añadirlo a la sidebar he modificado algunas cosas, por ejemplo las medidas, el borde y colores.
Algo muy importante a tener en cuenta son los nombres, los nombreVAR y nombreID deben ser únicos, si se colocan varios bloques expandibles, cada nombre debe ser diferente.
Utilizando width:100% abarca el total de la sidebar, si deseamos añadirlo en otro lugar y especificar la medida podemos añadir al principio del código
<div style="width: "220px;"> o sustituimos en el código width: 100%; por la medida necesaria.
Código personalizado:
<a style="border-top: 1px solid rgb(153, 204, 255); border-bottom: 1px solid rgb(0, 0, 0); margin: 2px 0px; padding: 10px 0pt; width: 100%; height: 13px; display: block; background:url('URL IMAGEN DE FONDO PARA EL BOTÓN'); color: rgb( 252,252,252) ! important; text-align: center; text-decoration: none ! important; font-size: 12px;" href="javascript:collapseE9900.slideit()">IMAGEN O TíTULO
</a>
<div id="E9900" style="width: 100%;">
<div style="border: 1px solid rgb( 61, 56, 22); padding: 0px; height: 550px; background:url('URL IMAGEN DE FONDO DEL CONTENIDO');">
CONTENIDO...
</div>
</div>
<script type="text/javascript">var collapseE9900=new animatedcollapse("E9900", 800, false)</script>
En color rojo es la que nos permite modificar o personalizar la parte del título o imagen que sirve de botón para desplegar el bloque.
En color azul podemos modificar el espacio del contenido.
En color verde es el cierre del código, donde 800 es la duración del efecto expresado en milisegundos. Al estado inicial del bloque añadimos "false"para que el bloque quede contraído, puede ser también "true" y el bloque quedaría expandido.
Recomiendo probar con colores fuertes o bordes muy gruesos eso nos ayudará a visualizar con exactitud la parte que estamos modificando.
.. Prueba ..| Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. |
 |
La forma de personalizar el contenido es muy sencilla, en mi caso añadí una imagen de fondo y un enmarcado para delimitar cada complemento.
El enmarcado se hace de la siguiente forma:
<table border="1" bordercolor="#ccc" #ccc white width="160" background-color: height="50">
<tr><td width="90%">
Contenido de texto, imágenes o lo que deseas añadir
</td></tr></table>
Contenido de texto, imágenes o lo que deseas añadir |
También podemos crear otro tipo de borde, pero será en otra entrada.
!Suerte¡
Interesante esta opción de los bloques animados y Gracias de nuevo por estos truquillos...
...que haria yo sin tu blog :P
PD: Quizás te interese la entrada que acabo de publicar con iconos RSS ;)
Saludooos!
Gracias Gem@por la deferencia.
ahora que el animo esta subiendo luego de los acontecimientos del fin de semana, lo probaré a ver como queda...
gracias...
una vez hecho te aviso....
tu amigo
Patricio
(Patán)
Hola gem@ muy buen post! Gracias por acordarte, de cualquier forma ya lo había hecho, aunque ahora no estoy segura si así como lo explicas, ya no me acuerdo je je, pero me funciona.
No se si viste como puse los Directorios, las categorías, los enlaces, creo que no todos llevan el mismo código... Como te digo ya me olvidé, que cabeza la mía!!
Lo que me gustaría sería ponerle la imagen de fondo que tienes, la de las rosas, se que no te molesta que use tus cosas, pero me gustaría que me digas en que lugar va, ya que no me quedó del todo claro.
Yo lo tengo sin imagen, o sea queda con el fondo de la sidebar, no se si quedará mejor con imagen, que opinas?
Otra consulta, como lo tengo yo, con el botón naranja, tuve que ponerle un titulo "click en el botón" por si la gente no se daba cuenta que allí estaban los directorios, te parece que queda bien así? O tendría que modificarlo o ponerle otra imagen?
Besotes gem@!!
Gem@ pasate por Resurgiendo que hay un regalito para vos que te lo merecés con altos honores, aunque no sigas la cadena.
Besoooooteeees!!
No hay caso, no puedo hacerlo, me estoy pegando cabezasos en el pc y nada..............
seguiré.....
hola gema,mi pregunta no tiene nada que ver con este post.
me gustaría me ayudaras. me puedes decir como tener registro RSS.no tengo ni idea como hacerlo.es para que vean en otros blog cuando actualizo.gracias de antemano.
Hola gem@, yo otra vez... tengo un problema con el blog de son_paul, algo raro que nunca vi, confieso que no me he puesto a revisar todo todavía, por eso te pregunto a ver si me ahorro algún trabajito, el caso es que en el lugar que debe salir el nombre del blog, o sea en la pestaña del navegador, en lugar de salir el nombre sale la url igual que en la barra de direcciones del navegador, tienes alguna idea de que cosa puede ser??
Por si no te acuerdas el blog es http://rendev.blogspot.com que es eso exactamente lo que sale en la pestaña en lugar de salir "Rendezvous".
Si tienes tiempo date una pasadita y miralo y de paso te reitero la invitación a pasar por Resurgiendo, que te he dejado un regalito.
Besooooteeeees!!
Hola
Gracias ...
Lo estuve probando pero siempre me queda expandido.
Se puede aplicar a Wordpress? si es asi me puedes decir como?
Enhorabuena por este estupendo blog que acabo de encontrar y seguiré visitando.
Saludos
Marta
Gem@, ¿esto no lo habías explicado con anterioridad? Juraría que sí, pero no lo encuentro. De todos modos es un buen truco.
Un abrazo hermana mayor ;)
P.D.: Pásate por mi blog que hay algo esperándote...
Hola Gema, gracias por explicar lo de bloques animados, se ahorra espacio en el blog, favorece la estética.
Tengo una pregunta: como se hace cuando dejo un comentario como este y quiero escribir un enlace o hipervinculo, sin que se vea la dirección de la página citada.
Ej: Visita este ¿_Enlace_?
Mas información ¿_Aqui_?
Hola gem@, ya encontré el problema en la plantilla de son_paul, era una porción de código que faltaba, justo la que decía titulo blog y esas cosas, no la tenía, lo copié de mi plantilla y ahora si sale el título.
Si me permites voy a sugerirte algo para una próxima entrada, es algo que me está comiendo el cerebro hace algunos días y seguro que tu si sabrás explicar como se hace, porque yo no logro entenderlo.
Hace unos días Bitacoras.com ha implementado un nuevo widges, creo que así se escribe, o no?
Se trata de un botoncito para votar las entradas de tu blog, pero ellos no explican gran cosa de como colocarlo en la plantilla, Olomán se ha ofrecido y lo explica en su blog: http://oloblogger.blogspot.com/2008/05/bitacorascom-agregar-votaciones-en.html
Pero como verás no soy la única que tiene problemas y soluciones no las veo.
El botoncito está colocado, lo que hace retardar bastante la carga del blog y encima no funciona.
Y lo del ping que se menciona allí, yo tengo dos servicios que hacen ping en Bitácoras, Totalping y Ping me, estoy inscripta y ya no se que mas puede estar fallando.
Como habrás visto ni siquiera pregunté nada, porque al ver las respuestas y las pocas soluciones ni me dieron ganas, yo se que vos podrías explicarlo bien si te empapas un poco en el asunto.
Y otra cosa que nadie explica es como ponerlo en Blogcindario (Miarroba), pero eso ya se que no te compete, lo preguntaré en el foro de soporte de Miarroba.
Bueno gem@ ya no te molesto mas por hoy, ya tienes trabajo ;)
Besoooootesss!!
Hola Gemita! Cómo estás? Te escribo para comentarte que AL FIN publiqué tu ícono de enlace en mi blog. No lo habia hecho por falta de tiempo pues ahorita estoy metido en la universidad y en un curso de la IBM y bueno acabo de terminar el primer módulo y por eso tengo tiempo jeje. Ya tengo la mención Ofimática y Redes de IBM jeje... Faltan solo 2 menciones... Espero que estés bien... Se te quiere...!
JuanCarlos 3941
Hola guapa! vengo a dejarte un premio :) Lo tienes aqui http://blognthecity.blogspot.com/2008/06/premio-blogger-sapiens.html
Por cierto, cambio de tema, te has enterado por Vagabundia que lo de Ecoogler era falso? que rabia me ha dado!
Un abrazo fuerte!!
Logré hacer algo parecido, no se si es igual, pero pienso que me quedo bastante bien.............
Pd. Ve a mi blos, ahy algo para ti....si lo quieres, ahy estará
http://patopatan.blogspot.com/2008/06/premio-dardo-2008.html
Muchisimas gracias por el truco!!!funciona perfectamente.
Tu blog es altamente instructivo...
volvere a visitarte frecuentemente, eres buena profesora ;)
Un Saludo!!!
Studiom6. Sin mi blog seguramente harías lo mismo que ahora no olvides que hay muy buenos bloggers con gran disponibilidad para ayudar, de todas formas te agradezco el comentario, los ánimos nunca viene mal ;)
-Son preciosos los iconos, gracias por el detalle :)
Hola Patricio gracias por comentar y por el regalo que pasaré a recoger ;)
K_nelita la imagen de las rosas la debes añadir donde dice "URL IMAGEN DE FONDO DEL CONTENIDO" y por supuesto que la puedes añadir en tu blog, puedes descargarla desde aquí y alojar en tu servidor para conseguir la url y evitar de este modo que si un día el servidor no funciona debidamente no te quedes sin la imagen :)
Sobre el problema del sistema de votación no estoy muy segura pero puedes ser debido a que debes utilizar el sistema que Bitacóras ofrece, es decir ir a tu perfil de usuario y hacer ping, una vez el post está registrado en Bitacoras.com (mediante el ping) ya es posible la votación (hasta que no está el post, los votos no se contabilizan)
Sobre Mi arroba, estás en lo cierto, es que no tengo idea de como funciona :(
Pasaré por el regalito !GRACIAS¡
Abrazos grandes amiga mía.
Hola Marta, si no hace el efecto de expandir y recoger puede ser debido a que los nombreVAR y nombreID no coinciden. Es decir deben ser iguales dentro de un mismo bloque pero para crear otro bloque serán diferentes.
Para el ejemplo añadí E9900, si te fijas está cuatro veces en el código, el error más común es ese, que olvidamos dar el mismo nombreVAR y nombreID dentro de un mismo bloque.
Sobre añadirlo en WP es algo que desconozco :(
Así es Jose, lo expliqué en varias ocasiones pero dando una utilidad diferente. Esta vez se traba de personalizar el bloque ;)
Voy a ver que me preparas esta vez :D Abrazos.
Saludos Roudy para aplicar un enlace en los comentarios hay algo que te va a sorprender por lo que se refiere a facilitar el trabajo. Se trata de Greasemonkey un script que nos proporciona unos botones extras sólo visibles al administrador del blog, con un click puedes añadir emoticones, enlazar, y bueno... mejor será que veas esta entrada estoy segura que no te arrepentirás de instalarlo :D
Gracias JuanCarlos 3941 por el comentario, estoy muy bien !gracias¡ un poco saturada de trabajo pero bien, ya llegarán tiempos más relajados o eso espero jajajaja
Me alegra las noticias que me traes sobre los estudios y que tengas más tiempo libre, que lujazoooooooooo
Gracias por el botón que me llevaré gustosa y por estar, a ti también te se quiere en este lugar :)
Abrazos.
!Hola Syl ¡ que chasco más grande lo de Ecoogler no tenía idea hasta que te he leído cosa que te agradezco y también ese premio que gustosa me traeré a mi blog.
Miles de gracias y besazos amiga :)
Saludos y bienvenido Piter me alegra que te guste el blog ojalá encuentres muchas utilidades ;)
MI QUERIDA AMIGA....PARA ESO ESTAMOS LOS MAIGOS...PARA APOYAR Y ACOMPAÑAR DANO FUERZAS.......BESOS
Queridísima gem@, te quivocas mucho en lo que dices:"Studiom6. Sin mi blog seguramente harías lo mismo que ahora no olvides que hay muy buenos bloggers con gran disponibilidad para ayudar, de todas formas te agradezco el comentario, los ánimos nunca viene mal ;)"
Tu blog, o mejor dicho, si mucho mejor dicho tú, no eres igual ni parecida a nadie, hay muchos blogs de ayuda, es cierto pero como explicas tu las cosas, la paciencia que tienes, los buenos modales, y el empeño que pones en ayudar a todo el mundo, no lo he visto en ninguno de todos los blogs de ayuda que visito frecuentemente.
Por favor no nos dejes!! Somos muchos tus fieles seguidores y te necesitamos, ya vez, que hace algún tiempo que no te pido nada, es porque se que no das a basto, no porque no necesite de tu ayuda, solo te espero, y creo que los demás hacen lo mismo, tenemos paciencia y esperamos, pero por favor no dejes el blog, realmente eres muy necesaria, no importa que no actualices, no importa que contestes de a poco a las inquietudes de la gente, los que te queremos, por vos, por tus valores como persona, por tu calidés, mas allá del blog y de tu ayuda, te pedimos, si, creo que hablo en nombre de todos, no nos abandones, te queremos gem@!
Te quiero gem@!!
PD: Gracias por la respuesta sobre la imagen!
Hola k_nelita tus palabras me han llegado al corazón y te confieso que me hicieron llorar.
Gracias por verme así, por el cariño que me transmites, por entenderme y por las palabras de ánimo.
Y sobre todo por ese Te quiero que salido del corazón.
Gracias AMIGA y por favor no guardes tus dudas, tu sabes que siempre tendrás mi ayuda aunque tarde un poquito más que de costumbre ;)
x-x no logro hacerlo uuuuu
Hola Gem@: Que buen truco!! Como encontré lo que buscaba hace tiempo!!! Te lo re agradezco y funciona muy bien en mis blogs... Me gustaría me tengas en cuenta en tu lista de recomendados. Gracias!
hola gema..
puedo poner un gif en mi perfil?
he visto que algunos bloguer lo tiene..perro ami la imagen se me queda estatica...
he probado a subirlo desde el equipo...y desde la web...
y siempre obtengo el mismo resultado..
gracias..
un saludo y felicitaciones por tu blog..
muchas cosas de mi blog las he sacado de aki...
:-)
Kiu mándame el código que estás intentado añadir que vea donde está el error ;)
Hace tiempo que estás en mi blog de amigos Princesa Yaquee :)
Fire si subes la imagen a Blogger es lógico que quede estática porque Blogger las admite pero no se visualizan animadas. Inténtalo con http://www.imageshack.us/ si aún así queda estática entonces podría ser el tamaño de la imagen.
Me alegra que te sean útiles las visitas a este blog :)
ya probe a subirla pequeñita..tipo avatar....
el gif que subo a imagenshak es pequeño...del tamaño el perfil....
pero ná de ná....
que medidas exactass debe de teenr?...
veo algunos bloguer con imagenes en movimiento en el perfil..
por lo tanto es posible..
la custion esta en como hacerlo...
un beso gema y gracias
La forma de hacerlo es accediendo al perfil, añadiendo la url de la imagen en el espacio para web y guardando los cambios abajo del todo.. Me queda la duda de la url que estás añadiendo si es la correcta ¿es el enlace directo a la iamgen? para saber si tu imagen puede visionarse sin problemas copia la url y pégala en la barra del navegador.
También puedes dejarme aquí la url que pruebe en mi blog ;)
he probado con muchas imagenes de diferentes tamaños...
pero ninguna me sale...si las cargo desde mi p.c se quedan estaticas...si las cargo desde la web ni salen...no sale ninguna imagen...
esta es la direccion...
http://img297.imageshack.us/img297/3658/animatedfractal4burninaka4.gif
queda perfecta pero no hay manera de cargarla...
un beso gema siento ser tan pesada
:-(
gema creo que el problema es que cuando pongo a cargar cualkier tipo de imagen desde la web...y le dooy abajo a guardar...no se carga nada....aparece sin imagen..
creo quue es ese el problema..no puedo guardar ninguna imagen que este en la web...aunke sea estatica....
:(
Holitas ^^, una consulta, ¿qué servidor me recomienda para el archivo .js? es que el que abrí no aceptó.
Disculpe las molestias pero es que en verdad me gustó mucho este efecto. v-v
Siento ver tan tarde tu comentario Fire, yo también he probado en mi blog y me encuentro en el mismo problema, alojé tu imagen en mi servidor, esta es la url:
http://hostfile.org/animatedfractal4burninaka4.gif
prueba por si hubiera suerte de todas formas si veo algo sobre este tema lo tengo en cuenta para informarte.
Kiu yo voy alternando dos http://pages.google.com/ y http://hostfile.org/index.php cualquiera es bueno, pero también es cierto que los dos tienen sus días buenos y malos ;)
Nota: solo los miembros de este blog pueden publicar comentarios.